# 1.2.1 react 基础写法

import React from 'react';

class Component extends React.Component {
    //needs render function
    render() {
        return (
            //return should tell React what the DOM should look like
            //if this component is rendered in the browser
        );
    }
}

function Component(props) {
    return (
        //return should tell React what the DOM should look like
        //if this component is rendered in the browser
    );
}

<table>
    <thead>
        <th>
            <td>Col</td>
        </th>
    </thead>
    <tbody>
        <tr>
            <td>Cell</td>
        </tr>
    </tbody>
</table>

React.createElement('table', null, 
    [
        React.createElement('thead', null, 
            React.createElement('th', null,
                React.createElement('td', null, 'Col')
            )
        ),
        React.createElement('tbody', null, 
            React.createElement('tr', null,
                React.createElement('td', 'null', 'Cell')
            )
        )
    ]

function CompanyProfile(props) {
    //ticker and companyProfileInfo stored in a variable
    const ticker = 'APPL';
    const companyProfileInfo = {
        'Company Name': 'Apple Inc.',
        'Exchange': 'Nasdaq',
        'Sector': 'Technology',
        'Industry': 'Computer Hardware',
        'CEO': 'Timothy D. Cook'
    };
    return (
        <div>
            <div>Profile of: {ticker}</div>
            <div>
                {
                    {/*This is javascript code inside the curly braces*/}
                    Object.keys(companyProfileInfo)
                        .map((key, index) => {
                            return <div>{key}: {companyProfileInfo[key]}</div>
                        })
                }
            </div>
        </div>
    )
}

return (
    <div>
        <div>
            <div></div>
        </div>
        <div></div>
    </div>
)

# 这样写就是错误的
return ( 
    <div></div>
    <div></div>
)

## html 中
<div style="bottom-border: 1px solid green"></div>

## react JSX 中，css 属性驼峰命名
<div style={{ bottomBorder: `1px solid green`}}></div>

## html 中
<div class="container"></div>

## react JSX 中
<div className={"container"}></div>

使用方法:

import classnames from 'classnames';
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

## html 中
<div onclick="clickHandler()"></div>

## react JSX 中
div onClick={function(){ alert('clicked')}}>

function ClickableButton(props){
    //callback function that's called when button is clicked
    const handleClick = () => { alert('Clicked') }
    return (
        <button onClick={handleClick}></button>
    )
}


# Function Binding
class Input extends React.Component {
    constructor(props){
        super(props);
        
        //bind handleChange function to proper this
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(e){
        this.setState({
            inputValue: e.target.value
        });
    }

    render(){
        return(
            <input onChange={this.handleChange} value={this.state.inputValue}/>
        )
    }
}

# react 向事件处理程序传递参数


<button onClick={this.editRow.bind(this, id)}>Delete Row</button>

editRow(id, e) {

}

function Children(props) {
    return (
        <div>{props.textToDisplay}</div>
    )
}

function Parent(props) {
    return (
        <Children textToDisplay={'Hello'}></Children>
    )
}

# 安装
yarn add prop-types


# 使用
import React from 'react';
import PropTypes from 'prop-types';

class SoftwareEngineer extends React.Component {
    render(){
        return (...)
    }
}

//defines "propTypes" property in this component
SoftwareEngineer.propTypes = {
    name: PropTypes.string.isRequired, //expects string and is required
    hobbies: PropTypes.arrayOf(PropTypes.string), //expects array of string
    address: PropTypes.shape({
        street: PropTypes.string,
        city: PropTypes.string
    }) //must be an object with 'street' and 'city' fields
}


# 指定 props 的默认值：
class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// 指定 props 的默认值：
Greeting.defaultProps = {
  name: 'Stranger'
};

class Component extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            counter: 0 
        }
    }

    render() {
        return <div>{this.state.counter}</div>
    }
}
                {
                    Object.keys(companyProfileInfo)
                        .map((key, index) => {
                            return <div>{key}: {companyProfileInfo[key]}</div>
                        })
                }
            </div>
    )
}

this.setState({
    counter: 2
});

//If you are using current state value to update the state, always use updater function
console.log(this.state.counter); //prints 0
this.setState((state) => ({ counter: state.counter + 1}) );
this.setState((state) => ({ counter: state.counter + 1}) );
this.setState((state) => ({ counter: state.counter + 1}) );

componentWillMount
componentWillUpdate
componentWillReceiveProps

class ComponentWithLifecycle extends React.Component {
    constructor(props){
        super(props);
    }

    componentDidMount(){
        //This will be called after the component is mounted to the DOM
    }

    componentDidUpdate(prevProps, prevState){
        //This will be called after the component is updated
        //Remember component can only be updated when the state changes
        //or the props changes
    }

    componentWillUnmount(){
        //This will be called right before this component is unmounted from
        //the DOM
    }
}